<template>
    <el-dialog  v-model="visible" :close-on-click-modal="false" draggable width="90%">
        <el-row style="margin-top: -20px">
            <h1 class="my-heading">我的购物车</h1>
        </el-row>
        <!--   查询条件     -->
        <el-row class="myContent">
            <el-form :model="queryForm" ref="dataFormRef" :inline="true">
                <el-form-item label="试卷名称" prop="dataName" >
                    <el-input placeholder="请输入试卷名称" v-model="queryForm.dataName" />
                </el-form-item>
                <el-form-item>
                    <el-button icon="search" type="primary" @click="getProtuct">查询</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!--   购物车商品     -->
        <div style="display: flex; flex-wrap: wrap; padding:0px 10px;">
            <el-card class="box" v-for="product in productList" :key="product.id">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox :label="product.dataId" :value="product.dataId"  style="margin-right: 10px">选择</el-checkbox>
                </el-checkbox-group>
                <img v-if="product.onlyOfficeId==null" src="../../../assets/pic.png">
                <img v-if='product.onlyOfficeId' :src="officeUrl+product.onlyOfficeId">
                <div class="box1">
                    <div slot="header" class="clearfix">
                        <el-tooltip class="box-item" effect="light" :content="product.dataName" placement="bottom-end">
                            <el-text truncated>{{product.dataName}}</el-text>
                        </el-tooltip>
                    </div>
                    <el-row>
                        <el-tooltip class="box-item" effect="light" :content="product.goodsDescribe" placement="bottom-end">
                            <el-text truncated>简介: {{product.goodsDescribe}}</el-text>
                        </el-tooltip>
                    </el-row>
                    <el-row>
                        <el-tooltip class="box-item" effect="light" :content="product.keyPoint" placement="bottom-end">
                            <el-text truncated>关键点: {{product.keyPoint}}</el-text>
                        </el-tooltip>
                    </el-row>
                </div>
            </el-card>
        </div>
        <div class="avue-crud__pagination">
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[12, 20, 50, 100]"
                    :page-size="pageSize"
                    :total="totalPage"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="selectAll">全选</el-button>
          <el-button type="danger" icon="delete" @click="deleteProduct">删除</el-button>
          <el-button type="warning" icon="Wallet" @click="centerDialogVisible=true">去结算</el-button>
        </span>
        </template>
        <!--  结算弹框    -->
        <el-dialog v-model="centerDialogVisible" title="购买" width="350" align-center>
            <div style="width:70%;margin: auto auto">
                <el-row class="span1">
                    <span >购买商品需线下联系</span>
                </el-row>
                <el-row class="span2">
                    <span>销售:{{buyInfoList.name}}</span>
                </el-row>
                <el-row class="span2">
                    <span>联系方式:{{buyInfoList.phone}}</span>
                </el-row>
                <el-row class="span2">
                    <span>邮箱:{{buyInfoList.mail}}</span>
                </el-row>
                <el-row class="span2">
                    <img :src="officeUrl+buyInfoList.onlyOfficeId" style="height: 180px;width: 180px">
                </el-row>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="centerDialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </el-dialog>
</template>

<script setup lang="ts" name="SpkSTDataDialog">
    import { useDict } from '/@/hooks/dict';
    import {useMessage, useMessageBox} from "/@/hooks/message";
    import {getObj, addObj, putObj, getShoppingCartList, deleteShoppingCart, buyInfo} from '/@/api/train/spkZlData'
    import { rule } from '/@/utils/validate';
    import {ref} from "vue";
    import {office} from "/@/api/train/kszlFile";
    import {delObjs} from "/@/api/train/ksglTranscript";
    import {fetchList} from "/@/api/train/kszlTestQuestion";
    const emit = defineEmits(['refresh']);
    // 定义变量内容
    const totalPage = ref(0);
    const pageIndex = ref(1); // 假设第一页是1
    const pageSize = ref(12); // 假设每页显示10条数据
    const officeUrl = ref()
    const dataFormRef = ref();
    const checkList = ref([]);
    const queryForm = ref({});
    const buyInfoList = ref({})
    const visible = ref(false)
    const isAll = ref(false)
    const loading = ref(false)
    const centerDialogVisible = ref(false)
    const productList = reactive([])
    // 定义校验规则
    const dataRules = ref({})
    onMounted(()=>{

    })
    // 打开弹窗
    const openDialog2 = (id: string) => {
        queryForm.value.goodsType = '1'
        buyInfo().then(res=>{
            buyInfoList.value = res.data.records[1]
        })
        checkList.value.length = 0
        office().then((res) => {
            officeUrl.value = res.data + '/downloadFile/';
        });
        getProtuct()
        visible.value = true
        // 重置表单数据
        nextTick(() => {
            dataFormRef.value?.resetFields();
        });
    };
    // 清空搜索条件
    const resetQuery = () => {
        // 清空搜索条件
        dataFormRef.value?.resetFields()
        getProtuct()
    }
    const getProtuct = async () =>{
        productList.length = 0
        try {
            const response = await getShoppingCartList({
                ...queryForm.value,
                current: pageIndex.value,
                size: pageSize.value
            });
            Object.assign(productList,response.data.records)
            totalPage.value = response.data.total;
        } catch (error) {
            console.error('Error fetching data:', error);
            // 在这里处理错误，例如显示错误消息给用户
        } finally {
        }
    }
    // 每页数
    const  sizeChangeHandle = (val:number)=> {
        pageSize.value = val
        pageIndex.value = 1
        getProtuct()
    }
    // 当前页
    const  currentChangeHandle =(val:number)=> {
        pageIndex.value = val
        getProtuct()
    }
    //全选
    const selectAll=()=>{
        isAll.value = !isAll.value
        if(isAll.value){
            productList.forEach(item=>{
                checkList.value.push(item.dataId)
            })
        }else {
            checkList.value.length = 0
        }
    }
    //删除商品
    const deleteProduct= async()=>{
        // console.log('checkList',checkList.value)
        try {
            await useMessageBox().confirm('此操作将永久删除');
        } catch {
            return;
        }
        try {
            await deleteShoppingCart(checkList.value);
            getProtuct();
            checkList.value = []
            useMessage().success('删除成功');
        } catch (err: any) {
            useMessage().error(err.msg);
        }
    }
    // 提交
    // const onSubmit = async () => {
    // 	const valid = await dataFormRef.value.validate().catch(() => {});
    // 	if (!valid) return false;
    // 	try {
    //     loading.value = true;
    // 		form.id ? await putObj(form) : await addObj(form);
    // 		useMessage().success(form.id ? '修改成功' : '添加成功');
    // 		visible.value = false;
    // 		emit('refresh');
    // 	} catch (err: any) {
    // 		useMessage().error(err.msg);
    // 	} finally {
    //     loading.value = false;
    //   }
    // };
    // 暴露变量
    defineExpose({
        openDialog2
    });
</script>
<style lang="scss" scoped>
    .my-heading {
        color: black;
        font-weight: bold;
        font-size: 26px;
        margin-bottom: 10px;
    }
    .box{
        margin: 0px 20px 20px 0;
        width: 15%;
        height: 340px;
        position: relative;
    }
    .box1{
        height: 70px;
        width: 237px;
        position: absolute;
        bottom:10px
    }
    .myContent{
        margin: 0px 20px;
    }
    .el-checkbox-group{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px;
    }
    .span1{
        font-weight: bold;
        font-size: 16px;
        color: red;
        margin-bottom: 10px;
    }
    .span2{
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }
    img{
        height: 180px;
        margin: 0 auto;
    }
    .el-card{
        height: 330px;
    }
</style>